<template>
  <div id="mask">
    <div class="container">
      <div class="content">
        检测到没有声音，是否开启游戏音乐？
      </div>
      <div class="footer">
        <div style="background-color: #a06d00" @click="turnOn" class="button">
          <span class="btn-text">开启</span>
        </div>
        <div style="background-color: #767169" @click="turnOff" class="button">
          <span class="btn-text">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AlertSound",
  methods:{
    turnOn(){
      this.$emit("turnOn");
    },
    turnOff(){
      this.$emit("turnOff");
    }
  }
}
</script>

<style scoped>
#mask{
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: #000000c9;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  text-align: center;
  padding: 20px;
  padding-left: 50px;
  padding-right: 50px;
  border-radius: 10px;
  background: rgba(254,254,254,0.7);
}
.footer{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  border-top: 1px solid #6d6d6d;
}
.button {
  position: relative; /* 确保伪元素定位正确 */
  background-color: #4CAF50; /* 按钮背景色 */
  border: none; /* 移除边框 */
  padding: 10px 20px; /* 内边距 */
  color: white; /* 文字颜色 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 移除下划线 */
  display: inline-block; /* 使其成为行内块元素 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 鼠标光标变为点击手势 */
  border-radius: 15px 15px;
}
</style>
